<script setup>
import { computed, reactive, watch } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  loading: {
    type: Boolean,
    default: false
  },
  topArea: {
    type: [String, Number],
    default: 44
  },
  hOffset: {
    type: [String, Number],
    default: 0
  }
})
const emits = defineEmits(['load'])

const loadMore = reactive({
  status: 'noMore',
  statusTypes: [{
    value: 'more',
    text: '查看更多',
    checked: true
  },
    {
      value: 'loading',
      text: '正在加载',
      checked: false
    },
    {
      value: 'noMore',
      text: '没有更多',
      checked: false
    }
  ],
  contentText: {
    contentdown: '查看更多',
    contentrefresh: '加载中',
    contentnomore: '没有更多'
  }
})
const show = computed(() => {
  return loadMore.status !== 'noMore'
})

const noData = computed(() => {
  const { data } = props
  return data.length <= 0
})

watch(() => props.data, (rows) => {
  const value = rows.length || 0
  const { total = 0 } = props
  if (total - value <= 0) {
    loadMore.status = 'noMore'
  } else if (value > 0) {
    loadMore.status = props.loading ? 'loading' : 'more'
  }
})

const onLoadMore = function() {
  const { data, total } = props
  if (data.length === total || props.loading) {
    return
  }
  emits('load')
}

const cssvar = computed(()=>{
  const { topArea,hOffset } = props
  let styles = {
    "--top-area-height":`${parseInt(topArea)}px`,
    "--height-offset":`${parseInt(hOffset)}rpx`,
  }

  return styles
})
</script>

<template>
  <div :class="['load-warp',show?'loading':'','bg-grey-200']" :style="cssvar">
    <uni-load-more
      v-if="!noData"
      :status="loadMore.status"
      :content-text="loadMore.contentText"
      @clickLoadMore="onLoadMore"
    />
    <div :class="['empty-list',noData?'':'hidden',show?'hidden':'']">
      <span class="empty-tip">暂无数据</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.load-warp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  .empty-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100vh - var(--top-area-height) - var(--height-offset));

    .empty-tip {
      font-size: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      position: absolute;
    }
  }


  &.loading {
    height: auto !important;
  }
}

.hidden {
  display: none !important;
}
</style>
